<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忆小宝 - 老年人记忆助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'warm-orange': '#FF8A65',
                        'soft-orange': '#FFB74D',
                        'light-orange': '#FFF3E0',
                        'warm-gray': '#F5F5F5',
                        'deep-orange': '#FF5722'
                    }
                }
            }
        }
    </script>
    <style>
        .phone-container {
            width: 375px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.15);
            border-radius: 25px;
            overflow: hidden;
            position: relative;
        }
        .screen {
            display: none;
            height: 812px;
            overflow-y: auto;
        }
        .screen.active {
            display: block;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #FF8A65 0%, #FFB74D 100%);
        }
        .card-shadow {
            box-shadow: 0 6px 20px rgba(255, 138, 101, 0.25);
        }
        .logo-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #FF8A65 0%, #FFB74D 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .safe-area-top {
            padding-top: 44px;
        }
        .safe-area-bottom {
            padding-bottom: 34px;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">忆小宝 - 精简版原型</h1>
        
        <!-- 导航按钮 -->
        <div class="flex justify-center gap-3 mb-8">
            <button onclick="showScreen('splash')" class="px-6 py-3 bg-warm-orange text-white rounded-xl hover:bg-deep-orange transition-all font-semibold">启动页</button>
            <button onclick="showScreen('home')" class="px-6 py-3 bg-warm-orange text-white rounded-xl hover:bg-deep-orange transition-all font-semibold">首页</button>
            <button onclick="showScreen('memory-board')" class="px-6 py-3 bg-warm-orange text-white rounded-xl hover:bg-deep-orange transition-all font-semibold">记忆板</button>
            <button onclick="showScreen('voice-wall')" class="px-6 py-3 bg-warm-orange text-white rounded-xl hover:bg-deep-orange transition-all font-semibold">声音墙</button>
            <button onclick="showScreen('profile')" class="px-6 py-3 bg-warm-orange text-white rounded-xl hover:bg-deep-orange transition-all font-semibold">个人中心</button>
        </div>

        <div class="flex justify-center">
            <div class="phone-container">
                
                <!-- 启动页 -->
                <div id="splash" class="screen active">
                    <!-- 状态栏 -->
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-signal text-sm"></i>
                            <i class="fas fa-wifi text-sm"></i>
                            <i class="fas fa-battery-three-quarters text-sm"></i>
                        </div>
                    </div>
                    
                    <div class="gradient-bg h-full flex flex-col items-center justify-center text-white relative">
                        <div class="text-center">
                            <!-- Logo -->
                            <div class="w-32 h-32 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-8 mx-auto logo-animation">
                                <i class="fas fa-heart text-6xl text-white"></i>
                            </div>
                            
                            <h1 class="text-5xl font-bold mb-4">忆小宝</h1>
                            <p class="text-xl mb-12 opacity-90">您的贴心记忆助手</p>
                            
                            <div class="space-y-6 text-lg mb-16">
                                <div class="flex items-center justify-center">
                                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                                        <i class="fas fa-clipboard-list text-sm"></i>
                                    </div>
                                    <span>智能记忆提醒</span>
                                </div>
                                <div class="flex items-center justify-center">
                                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                                        <i class="fas fa-heart text-sm"></i>
                                    </div>
                                    <span>家人关爱连接</span>
                                </div>
                                <div class="flex items-center justify-center">
                                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                                        <i class="fas fa-shield-alt text-sm"></i>
                                    </div>
                                    <span>简单安全易用</span>
                                </div>
                            </div>
                            
                            <button onclick="showScreen('home')" class="bg-white text-warm-orange px-12 py-4 rounded-full text-xl font-bold hover:shadow-2xl transition-all transform hover:scale-105">
                                开始使用
                            </button>
                        </div>
                        
                        <!-- 底部版本信息 -->
                        <div class="absolute bottom-8 text-center w-full">
                            <p class="text-sm opacity-70">版本 1.0.0</p>
                        </div>
                    </div>
                </div>

                <!-- 首页 -->
                <div id="home" class="screen">
                    <!-- 状态栏 -->
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-signal text-sm"></i>
                            <i class="fas fa-wifi text-sm"></i>
                            <i class="fas fa-battery-three-quarters text-sm"></i>
                        </div>
                    </div>
                    
                    <div class="h-full bg-light-orange">
                        <!-- 头部区域 -->
                        <div class="gradient-bg text-white p-6 safe-area-top">
                            <div class="flex justify-between items-center mb-6">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-heart text-xl"></i>
                                    </div>
                                    <div>
                                        <h2 class="text-xl font-bold">忆小宝</h2>
                                        <p class="text-sm opacity-80">记忆助手</p>
                                    </div>
                                </div>
                                <button onclick="showScreen('profile')" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-cog text-lg"></i>
                                </button>
                            </div>
                            
                            <div class="text-center">
                                <h3 class="text-2xl font-bold mb-2">您好，张奶奶</h3>
                                <p class="text-lg opacity-90">今天是2024年1月15日 星期一</p>
                            </div>
                        </div>

                        <!-- 主要内容区域 -->
                        <div class="p-6 pb-24">
                            <!-- 今日重要提醒 -->
                            <div class="bg-white rounded-3xl p-6 card-shadow mb-8">
                                <h4 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-3 text-xl"></i>
                                    今日重要提醒
                                </h4>
                                <div class="bg-gradient-to-r from-warm-orange to-soft-orange bg-opacity-10 rounded-2xl p-5">
                                    <div class="flex items-center">
                                        <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mr-4 shadow-lg">
                                            <i class="fas fa-pills text-warm-orange text-2xl"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h5 class="font-bold text-gray-800 text-lg mb-1">记得吃降压药</h5>
                                            <p class="text-gray-600">上午9:00 - 还有30分钟</p>
                                        </div>
                                        <button class="bg-green-500 text-white px-4 py-2 rounded-full text-sm font-semibold">
                                            <i class="fas fa-check mr-1"></i>完成
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 核心功能区域 -->
                            <div class="space-y-6">
                                <h4 class="text-xl font-bold text-gray-800">主要功能</h4>
                                
                                <!-- 黄金记忆板 -->
                                <div onclick="showScreen('memory-board')" class="bg-white rounded-3xl p-6 card-shadow cursor-pointer transform hover:scale-105 transition-all">
                                    <div class="flex items-center">
                                        <div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mr-5">
                                            <i class="fas fa-clipboard-list text-white text-3xl"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h5 class="text-xl font-bold text-gray-800 mb-2">黄金记忆板</h5>
                                            <p class="text-gray-600 mb-3">重要事项智能提醒</p>
                                            <div class="flex items-center text-sm text-blue-600">
                                                <span class="bg-blue-100 px-3 py-1 rounded-full mr-2">今日 3 项</span>
                                                <span>点击查看详情</span>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400 text-xl"></i>
                                    </div>
                                </div>

                                <!-- 亲人声音墙 -->
                                <div onclick="showScreen('voice-wall')" class="bg-white rounded-3xl p-6 card-shadow cursor-pointer transform hover:scale-105 transition-all">
                                    <div class="flex items-center">
                                        <div class="w-20 h-20 bg-gradient-to-br from-pink-400 to-red-500 rounded-2xl flex items-center justify-center mr-5">
                                            <i class="fas fa-heart text-white text-3xl"></i>
                                        </div>
                                        <div class="flex-1">
                                            <h5 class="text-xl font-bold text-gray-800 mb-2">亲人声音墙</h5>
                                            <p class="text-gray-600 mb-3">家人关爱语音收藏</p>
                                            <div class="flex items-center text-sm text-pink-600">
                                                <span class="bg-pink-100 px-3 py-1 rounded-full mr-2">新消息 2 条</span>
                                                <span>点击收听</span>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400 text-xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部导航栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 safe-area-bottom">
                            <div class="flex justify-around py-4">
                                <div class="text-center">
                                    <i class="fas fa-home text-2xl text-warm-orange mb-1"></i>
                                    <p class="text-xs text-warm-orange font-semibold">首页</p>
                                </div>
                                <div class="text-center">
                                    <i class="fas fa-list text-2xl text-gray-400 mb-1"></i>
                                    <p class="text-xs text-gray-400">记录</p>
                                </div>
                                <div class="text-center">
                                    <i class="fas fa-user text-2xl text-gray-400 mb-1"></i>
                                    <p class="text-xs text-gray-400">我的</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 黄金记忆板 -->
                <div id="memory-board" class="screen">
                    <!-- 状态栏 -->
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-signal text-sm"></i>
                            <i class="fas fa-wifi text-sm"></i>
                            <i class="fas fa-battery-three-quarters text-sm"></i>
                        </div>
                    </div>
                    
                    <div class="h-full bg-light-orange">
                        <!-- 头部导航 -->
                        <div class="gradient-bg text-white p-6 safe-area-top">
                            <div class="flex items-center justify-between mb-4">
                                <button onclick="showScreen('home')" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-arrow-left text-lg"></i>
                                </button>
                                <h2 class="text-xl font-bold">黄金记忆板</h2>
                                <button class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-plus text-lg"></i>
                                </button>
                            </div>
                        </div>

                        <div class="p-6 pb-32">
                            <!-- 今日重要 -->
                            <div class="mb-8">
                                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-3"></i>
                                    今日重要
                                </h3>
                                
                                <div class="space-y-4">
                                    <div class="bg-white rounded-3xl p-6 card-shadow">
                                        <div class="flex items-start">
                                            <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=80&h=80&fit=crop&crop=center" 
                                                 class="w-20 h-20 rounded-2xl object-cover mr-4">
                                            <div class="flex-1">
                                                <h4 class="font-bold text-gray-800 text-lg mb-2">记得吃降压药</h4>
                                                <p class="text-gray-600 mb-3">每天上午9点，饭后半小时服用</p>
                                                <div class="flex items-center justify-between">
                                                    <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-4 py-2 rounded-full font-semibold">
                                                        <i class="fas fa-clock mr-2"></i>09:00
                                                    </span>
                                                    <button class="bg-green-500 text-white px-6 py-2 rounded-full text-sm font-semibold">
                                                        <i class="fas fa-check mr-1"></i>已完成
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-4 pt-4 border-t border-gray-100">
                                            <p class="text-sm text-gray-500 flex items-center">
                                                <i class="fas fa-user mr-2"></i>小明添加 · 来自家人关爱
                                            </p>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-3xl p-6 card-shadow">
                                        <div class="flex items-start">
                                            <img src="https://images.unsplash.com/photo-1551218808-94e220e084d2?w=80&h=80&fit=crop&crop=center" 
                                                 class="w-20 h-20 rounded-2xl object-cover mr-4">
                                            <div class="flex-1">
                                                <h4 class="font-bold text-gray-800 text-lg mb-2">下午看医生</h4>
                                                <p class="text-gray-600 mb-3">心内科复查，记得带上病历本</p>
                                                <div class="flex items-center justify-between">
                                                    <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-4 py-2 rounded-full font-semibold">
                                                        <i class="fas fa-clock mr-2"></i>14:30
                                                    </span>
                                                    <button class="bg-warm-orange text-white px-6 py-2 rounded-full text-sm font-semibold">
                                                        <i class="fas fa-bell mr-1"></i>提醒我
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 本周计划 -->
                            <div>
                                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                                    <i class="fas fa-calendar text-warm-orange mr-3"></i>
                                    本周计划
                                </h3>
                                
                                <div class="space-y-3">
                                    <div class="bg-white rounded-2xl p-5 card-shadow">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center mr-4">
                                                    <i class="fas fa-shopping-cart text-blue-500 text-xl"></i>
                                                </div>
                                                <div>
                                                    <h4 class="font-bold text-gray-800 text-lg">买菜清单</h4>
                                                    <p class="text-sm text-gray-600">周三去超市</p>
                                                </div>
                                            </div>
                                            <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">2天后</span>
                                        </div>
                                    </div>

                                    <div class="bg-white rounded-2xl p-5 card-shadow">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mr-4">
                                                    <i class="fas fa-phone text-green-500 text-xl"></i>
                                                </div>
                                                <div>
                                                    <h4 class="font-bold text-gray-800 text-lg">给小红打电话</h4>
                                                    <p class="text-sm text-gray-600">周末聊天</p>
                                                </div>
                                            </div>
                                            <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">4天后</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-6 safe-area-bottom">
                            <div class="flex space-x-4">
                                <button class="flex-1 bg-warm-orange text-white py-4 rounded-2xl font-semibold flex items-center justify-center text-lg">
                                    <i class="fas fa-microphone mr-3"></i>语音添加
                                </button>
                                <button class="flex-1 bg-gray-100 text-gray-700 py-4 rounded-2xl font-semibold flex items-center justify-center text-lg">
                                    <i class="fas fa-camera mr-3"></i>拍照添加
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 亲人声音墙 -->
                <div id="voice-wall" class="screen">
                    <!-- 状态栏 -->
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-signal text-sm"></i>
                            <i class="fas fa-wifi text-sm"></i>
                            <i class="fas fa-battery-three-quarters text-sm"></i>
                        </div>
                    </div>
                    
                    <div class="h-full bg-light-orange">
                        <!-- 头部导航 -->
                        <div class="gradient-bg text-white p-6 safe-area-top">
                            <div class="flex items-center justify-between mb-4">
                                <button onclick="showScreen('home')" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-arrow-left text-lg"></i>
                                </button>
                                <h2 class="text-xl font-bold">亲人声音墙</h2>
                                <button class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-heart text-lg"></i>
                                </button>
                            </div>
                        </div>

                        <div class="p-6 pb-32">
                            <!-- 今日推荐 -->
                            <div class="bg-white rounded-3xl p-8 card-shadow mb-8">
                                <div class="text-center">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop&crop=faces" 
                                         class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-pink-200">
                                    <h3 class="text-xl font-bold text-gray-800 mb-3">小明的祝福</h3>
                                    <p class="text-gray-600 mb-6 text-lg leading-relaxed">"妈妈，今天天气很好，记得出去晒晒太阳哦！"</p>
                                    <div class="flex items-center justify-center space-x-6">
                                        <button class="w-16 h-16 bg-gradient-to-r from-pink-400 to-red-500 rounded-full flex items-center justify-center shadow-lg">
                                            <i class="fas fa-play text-white text-xl"></i>
                                        </button>
                                    </div>
                                    <p class="text-sm text-gray-500 mt-4">今天 08:30 · 1分30秒</p>
                                </div>
                            </div>

                            <!-- 家人消息列表 -->
                            <h3 class="text-xl font-bold text-gray-800 mb-4">家人消息</h3>
                            
                            <div class="space-y-4">
                                <div class="bg-white rounded-3xl p-5 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=70&h=70&fit=crop&crop=faces" 
                                             class="w-18 h-18 rounded-full object-cover mr-4 border-2 border-blue-200">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-2">
                                                <h4 class="font-bold text-gray-800 text-lg">小明</h4>
                                                <span class="text-xs text-gray-500">2小时前</span>
                                            </div>
                                            <p class="text-gray-600 mb-3">发送了一条语音祝福</p>
                                            <div class="flex items-center justify-between">
                                                <button class="bg-blue-100 text-blue-600 px-4 py-2 rounded-full text-sm font-semibold">
                                                    <i class="fas fa-play mr-2"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">1分30秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-3xl p-5 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=70&h=70&fit=crop&crop=faces" 
                                             class="w-18 h-18 rounded-full object-cover mr-4 border-2 border-pink-200">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-2">
                                                <h4 class="font-bold text-gray-800 text-lg">小红</h4>
                                                <span class="text-xs text-gray-500">昨天</span>
                                            </div>
                                            <p class="text-gray-600 mb-3">妈妈，我做了您最爱吃的红烧肉</p>
                                            <div class="flex items-center justify-between">
                                                <button class="bg-pink-100 text-pink-600 px-4 py-2 rounded-full text-sm font-semibold">
                                                    <i class="fas fa-play mr-2"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">45秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-3xl p-5 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=70&h=70&fit=crop&crop=faces" 
                                             class="w-18 h-18 rounded-full object-cover mr-4 border-2 border-green-200">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-2">
                                                <h4 class="font-bold text-gray-800 text-lg">小华</h4>
                                                <span class="text-xs text-gray-500">2天前</span>
                                            </div>
                                            <p class="text-gray-600 mb-3">奶奶，我考试得了第一名！</p>
                                            <div class="flex items-center justify-between">
                                                <button class="bg-green-100 text-green-600 px-4 py-2 rounded-full text-sm font-semibold">
                                                    <i class="fas fa-play mr-2"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">1分15秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 收藏区域 -->
                            <div class="mt-8">
                                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-3"></i>
                                    我的收藏
                                </h3>
                                <div class="bg-white rounded-3xl p-8 card-shadow">
                                    <div class="text-center">
                                        <i class="fas fa-heart text-5xl text-red-400 mb-4"></i>
                                        <p class="text-gray-600 text-lg">收藏家人的温暖话语</p>
                                        <p class="text-sm text-gray-500 mt-2">长按语音消息即可收藏</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-6 safe-area-bottom">
                            <div class="flex space-x-4">
                                <button class="flex-1 bg-gradient-to-r from-pink-400 to-red-500 text-white py-4 rounded-2xl font-semibold flex items-center justify-center text-lg">
                                    <i class="fas fa-random mr-3"></i>随机播放
                                </button>
                                <button class="flex-1 bg-gray-100 text-gray-700 py-4 rounded-2xl font-semibold flex items-center justify-center text-lg">
                                    <i class="fas fa-cog mr-3"></i>播放设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 个人中心 -->
                <div id="profile" class="screen">
                    <!-- 状态栏 -->
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-signal text-sm"></i>
                            <i class="fas fa-wifi text-sm"></i>
                            <i class="fas fa-battery-three-quarters text-sm"></i>
                        </div>
                    </div>
                    
                    <div class="h-full bg-light-orange">
                        <!-- 头部导航 -->
                        <div class="gradient-bg text-white p-6 safe-area-top">
                            <div class="flex items-center justify-between mb-6">
                                <button onclick="showScreen('home')" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-arrow-left text-lg"></i>
                                </button>
                                <h2 class="text-xl font-bold">个人中心</h2>
                                <div class="w-10"></div>
                            </div>
                            
                            <!-- 用户信息 -->
                            <div class="text-center">
                                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop&crop=faces" 
                                     class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-white">
                                <h3 class="text-2xl font-bold mb-1">张奶奶</h3>
                                <p class="text-lg opacity-90">使用忆小宝 7 天</p>
                            </div>
                        </div>

                        <div class="p-6 pb-24">
                            <!-- 统计信息 -->
                            <div class="grid grid-cols-2 gap-4 mb-8">
                                <div class="bg-white rounded-2xl p-5 text-center card-shadow">
                                    <i class="fas fa-clipboard-list text-3xl text-blue-500 mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">记忆事项</h4>
                                    <p class="text-2xl font-bold text-blue-500 mt-1">12</p>
                                </div>
                                <div class="bg-white rounded-2xl p-5 text-center card-shadow">
                                    <i class="fas fa-heart text-3xl text-pink-500 mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">收到关爱</h4>
                                    <p class="text-2xl font-bold text-pink-500 mt-1">28</p>
                                </div>
                            </div>

                            <!-- 设置选项 -->
                            <div class="space-y-4">
                                <h3 class="text-xl font-bold text-gray-800 mb-4">设置</h3>
                                
                                <div class="bg-white rounded-2xl p-5 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
                                                <i class="fas fa-bell text-blue-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">通知设置</h4>
                                                <p class="text-sm text-gray-600">管理提醒和通知</p>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-5 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
                                                <i class="fas fa-users text-green-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">家人管理</h4>
                                                <p class="text-sm text-gray-600">添加或管理家人</p>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-5 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4">
                                                <i class="fas fa-palette text-purple-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">主题设置</h4>
                                                <p class="text-sm text-gray-600">字体大小和颜色</p>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-5 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mr-4">
                                                <i class="fas fa-question-circle text-orange-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">帮助中心</h4>
                                                <p class="text-sm text-gray-600">使用教程和常见问题</p>
                                            </div>
                                        </div>
                                        <i class="fas fa-chevron-right text-gray-400"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- 版本信息 -->
                            <div class="mt-8 text-center">
                                <p class="text-gray-500">忆小宝 v1.0.0</p>
                                <p class="text-sm text-gray-400 mt-1">让记忆更简单，让关爱更贴心</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        function showScreen(screenId) {
            // 隐藏所有屏幕
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => {
                screen.classList.remove('active');
            });
            
            // 显示选中的屏幕
            const targetScreen = document.getElementById(screenId);
            if (targetScreen) {
                targetScreen.classList.add('active');
            }
        }

        // 默认显示启动页
        document.addEventListener('DOMContentLoaded', function() {
            showScreen('splash');
        });

        // 添加一些交互效果
        document.addEventListener('click', function(e) {
            if (e.target.closest('.card-shadow')) {
                const card = e.target.closest('.card-shadow');
                card.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    card.style.transform = '';
                }, 150);
            }
        });
    </script>
</body>
</html>